<template>
  <div class="my-apps-view">
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">我的应用</h1>
          <p class="page-description">管理您创建的所有应用</p>
        </div>
        <div class="header-right">
          <a-button type="primary" @click="createNewApp">
            <template #icon>
              <PlusOutlined />
            </template>
            新建应用
          </a-button>
        </div>
      </div>
    </div>
    
    <div class="apps-content">
      <!-- 统计卡片 -->
      <a-row :gutter="[16, 16]" class="stats-row">
        <a-col :xs="12" :sm="6">
          <a-card class="stat-card">
            <a-statistic title="总应用数" :value="stats.total" />
          </a-card>
        </a-col>
        <a-col :xs="12" :sm="6">
          <a-card class="stat-card">
            <a-statistic title="运行中" :value="stats.running" />
          </a-card>
        </a-col>
        <a-col :xs="12" :sm="6">
          <a-card class="stat-card">
            <a-statistic title="已停止" :value="stats.stopped" />
          </a-card>
        </a-col>
        <a-col :xs="12" :sm="6">
          <a-card class="stat-card">
            <a-statistic title="本月新增" :value="stats.thisMonth" />
          </a-card>
        </a-col>
      </a-row>
      
      <!-- 应用列表 -->
      <a-card title="应用列表" class="apps-list-card">
        <template #extra>
          <a-space>
            <a-select v-model:value="filterStatus" placeholder="状态筛选" style="width: 120px">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="running">运行中</a-select-option>
              <a-select-option value="stopped">已停止</a-select-option>
            </a-select>
            <a-input-search 
              v-model:value="searchKeyword" 
              placeholder="搜索应用" 
              style="width: 200px"
              @search="handleSearch"
            />
          </a-space>
        </template>
        
        <div class="apps-grid">
          <div 
            v-for="app in filteredApps" 
            :key="app.id"
            class="app-card"
          >
            <div class="app-header">
              <div class="app-icon">
                <component :is="app.icon" />
              </div>
              <div class="app-status">
                <a-badge 
                  :status="app.status === 'running' ? 'processing' : 'default'" 
                  :text="app.status === 'running' ? '运行中' : '已停止'"
                />
              </div>
            </div>
            
            <div class="app-content">
              <h3 class="app-name">{{ app.name }}</h3>
              <p class="app-description">{{ app.description }}</p>
              <div class="app-meta">
                <span class="app-type">{{ app.type }}</span>
                <span class="app-date">{{ app.createTime }}</span>
              </div>
            </div>
            
            <div class="app-actions">
              <a-space>
                <a-button size="small" @click="viewApp(app)">查看</a-button>
                <a-button size="small" @click="editApp(app)">编辑</a-button>
                <a-dropdown>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item @click="deployApp(app)">部署</a-menu-item>
                      <a-menu-item @click="cloneApp(app)">克隆</a-menu-item>
                      <a-menu-divider />
                      <a-menu-item @click="deleteApp(app)" class="danger-item">删除</a-menu-item>
                    </a-menu>
                  </template>
                  <a-button size="small">
                    更多
                    <DownOutlined />
                  </a-button>
                </a-dropdown>
              </a-space>
            </div>
          </div>
        </div>
        
        <!-- 空状态 -->
        <a-empty v-if="filteredApps.length === 0" description="暂无应用">
          <a-button type="primary" @click="createNewApp">立即创建</a-button>
        </a-empty>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { 
  PlusOutlined, 
  DownOutlined,
  AppstoreOutlined,
  MobileOutlined,
  DesktopOutlined,
  ApiOutlined
} from '@ant-design/icons-vue'

// 统计数据
const stats = ref({
  total: 12,
  running: 8,
  stopped: 4,
  thisMonth: 3
})

// 筛选和搜索
const filterStatus = ref('')
const searchKeyword = ref('')

// 应用数据
const apps = ref([
  {
    id: 1,
    name: '个人博客系统',
    description: '基于 Vue 3 的个人博客网站',
    type: 'Web 应用',
    status: 'running',
    createTime: '2024-01-15',
    icon: AppstoreOutlined
  },
  {
    id: 2,
    name: '任务管理 App',
    description: '移动端任务管理应用',
    type: '移动应用',
    status: 'stopped',
    createTime: '2024-01-10',
    icon: MobileOutlined
  },
  {
    id: 3,
    name: '数据分析平台',
    description: '企业数据分析和可视化平台',
    type: '桌面应用',
    status: 'running',
    createTime: '2024-01-08',
    icon: DesktopOutlined
  },
  {
    id: 4,
    name: '用户管理 API',
    description: 'RESTful 用户管理接口服务',
    type: 'API 服务',
    status: 'running',
    createTime: '2024-01-05',
    icon: ApiOutlined
  }
])

// 过滤后的应用列表
const filteredApps = computed(() => {
  let result = apps.value
  
  if (filterStatus.value) {
    result = result.filter(app => app.status === filterStatus.value)
  }
  
  if (searchKeyword.value) {
    result = result.filter(app => 
      app.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      app.description.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }
  
  return result
})

// 事件处理
const createNewApp = () => {
  console.log('创建新应用')
}

const handleSearch = () => {
  console.log('搜索:', searchKeyword.value)
}

const viewApp = (app: any) => {
  console.log('查看应用:', app)
}

const editApp = (app: any) => {
  console.log('编辑应用:', app)
}

const deployApp = (app: any) => {
  console.log('部署应用:', app)
}

const cloneApp = (app: any) => {
  console.log('克隆应用:', app)
}

const deleteApp = (app: any) => {
  console.log('删除应用:', app)
}
</script>

<style scoped>
.my-apps-view {
  padding: 0;
}

.page-header {
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #1677ff;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #1677ff 0%, #69b1ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-description {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.header-right {
  margin-left: 24px;
}

.stats-row {
  margin-bottom: 24px;
}

.stat-card {
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.apps-list-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.app-card {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 20px;
  background: #fafafa;
  transition: all 0.3s ease;
  cursor: pointer;
}

.app-card:hover {
  border-color: #1677ff;
  background: #f0f8ff;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.1);
  transform: translateY(-2px);
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.app-icon {
  font-size: 24px;
  color: #1677ff;
}

.app-content {
  margin-bottom: 16px;
}

.app-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.app-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  line-height: 1.5;
}

.app-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.app-type {
  background: #e6f4ff;
  color: #1677ff;
  padding: 2px 8px;
  border-radius: 4px;
}

.app-actions {
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
}

.danger-item {
  color: #ff4d4f !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 16px;
  }
  
  .header-right {
    margin-left: 0;
    align-self: stretch;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .apps-grid {
    grid-template-columns: 1fr;
  }
}
</style>
